<!doctype html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>小苏后台管理系统</title>
	<link rel="stylesheet" type="text/css" th:href="@{/login/css/normalize.css}" />
	<link rel="stylesheet" type="text/css" th:href="@{/login/css/default.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/login/css/styles.css}">
	<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>小苏后台管理系统登录</h1>
		</header>
		<div class="wrapper">
			<div class="container">
				<h1>欢迎登录</h1>
				
				<form action="/login" method="post" class="form" id="login">
					<input type="text" value="root" name="username" placeholder="Username">
					<input type="password" value="root" name="password" placeholder="Password">
					<button type="submit" id="login-button">Login</button>
				</form>
			</div>
			
			<ul class="bg-bubbles">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>

	</div>
	<script th:src="@{/layui/layui.js}"></script>
	<script th:src="@{/login/js/jquery-2.1.1.min.js}"></script>
	<script>

		/*var message = `[[${msg}]]`+""
		alert(message)
		if(message==""){
			layer.msg(message, {icon: 2,time:1000});
		}*/
		layui.use(['table','jquery','layer'], function() {
			var $ = layui.jquery
			var layer = layui.layer

			$('#login-button').click(function (event) {
				event.preventDefault();
				$('form').fadeOut(500);
				$('.wrapper').addClass('form-success');
				$.post("/loginUser",$("#login").serialize(),function (data) {
					if(data.code==200){
						layer.msg(data.message, {icon: 1,time:1000});
						location.href = "/index?id="+data.data
					}else {
						layer.msg(data.message, {icon: 2,time:1000});
					}
				})
			});
		})
	</script>
</body>
</html>